<template>
  <!-- 根据检查区域id查询责任人 -->
  <a-select
    :allowClear="allowClear"
    :showSearch="showSearch"
    :optionFilterProp="optionFilterProp"
    filterOption
    v-bind="$attrs"
    v-on="$listeners"
    v-model="localValue"
    :placeholder="placeholder"
  >
    <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  </a-select>
</template>

<script>
import { riskDistinguishAndMonitor } from '@/api/quality/quality' // api
export default {
  model: {
    event: 'packageChange'
  },
  props: {
    allowClear: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    optionFilterProp: {
      type: String,
      default: 'children'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 项目ID
    areaId: {
      type: [String, Number],
      default: ''
    },
    // 双向绑定使用
    value: {
      type: [String, Number, Object, Array]
    },
    // 是否过滤重复的人员
    needFilterDuplicate: {
      type: Boolean,
      default: true
    },
    //如果是编辑，第一次不要重置绑定的值。。。。
    isEdit: {
      type: Boolean,
      default: () => true
    }
  },
  mounted() {
    this.getPersonList()
    if (this.$attrs.mode == 'multiple') {
      this.isMultiple = true
    }
  },
  watch: {
    areaId: {
      handler() {
        if (this.isEdit) {
          if (this.isCanClear) {
            this.localValue = void 0
            this.$emit('resetSelf')
          } else {
            if (this.areaId) {
              this.isCanClear = true
            }
          }
        } else {
          this.localValue = void 0
          this.$emit('resetSelf')
        }
        this.getPersonList()
      }
    }
  },
  computed: {
    localValue: {
      get() {
        if (this.personList.length > 0) {
          this.$emit(
            'update:option',
            this.personList?.find((item) => item.userId === this.value)
          )
          this.$emit(
            'getOption',
            this.personList.find((item) => item.userId === this.value)
          )
        }
        let currentLabel
        let target = this.personList?.find((item) => item.id === this.value)
        currentLabel = target && target.employeeName
        if (this.isMultiple) {
          target =
            this.personList.filter((item, index) => {
              return this.value?.includes(item.id)
            }) || []
          currentLabel = target.length && target.map((v) => v.employeeName)
        }
        this.$emit('update:currentLabel', currentLabel || '')
        this.$emit('personChanged', target || {})
        let noVal = this.isMultiple ? [] : void 0
        return this.value || noVal
      },
      set(val) {
        this.$emit('packageChange', val)
        let currentLabel
        let target = this.personList.find((item) => item.id === val)
        currentLabel = target && target.employeeName
        if (this.isMultiple) {
          target =
            this.personList.filter((item, index) => {
              return this.value?.includes(item.id)
            }) || []
          currentLabel = target.length && target.map((v) => v.employeeName)
        }
        this.$emit('update:currentLabel', currentLabel || '')
        this.$emit('personChanged', target || {})
      }
    }
  },
  data() {
    return {
      isCanClear: !this.isEdit, // 是否清除
      personList: [],
      fetching: false,
      isMultiple: false
    }
  },
  methods: {
    /**
     * 获取指定id的对象
     */
    getPersonObj(id) {
      const target = this.departments.find((item) => item.id === id)
      return (target && target) || void 0
    },
    async getPersonList() {
      if (!this.areaId) return
      try {
        let res = {}
        this.fetching = true
        res = await riskDistinguishAndMonitor.getNodeStatusById(this.areaId)
        this.fetching = false
        let list = res.code === 200 ? res.data : []
        this.personList = list
        this.$emit('update:list', this.personList)
      } catch {
        this.fetching = false
        this.personList = []
      }
    }
  }
}
</script>

<style>
</style>